<!-- 循环连接线 -->
<template>
    <div>
        <el-card>
            <template #header>
                <span class="title-span">通用</span>
            </template>
            <el-form label-width="100">
                <!-- <el-form-item label="名称：">
                    <el-input v-model="props.showFlowData.data.lineName"></el-input>
                </el-form-item> -->
                <el-form-item label="名称：">
                    <el-input v-model="popShowData.dataOne.name" disabled></el-input>
                </el-form-item>
                <el-form-item label="类型：">
                    <el-select v-model="popShowData.dataOne.type" disabled>
                        <el-option label="枚举" value="1"></el-option>
                        <el-option label="多文本" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="值：">
                    <el-select v-model="popShowData.dataOne.selectValue">
                        <el-option label="不判断" value="0"></el-option>
                        <el-option label="判断成功" value="1"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </el-card>

    </div>
</template>

<script setup>
import { ref, defineProps, onMounted, watch } from 'vue';
import flowNodesStore from '@/store/modules/flowNodes'
import { listAllMaterial } from "@/api/flow/material";
import { computed } from 'vue';
const { proxy } = getCurrentInstance();
const flowNodes = flowNodesStore()
const material_list = ref([])
let flag = false;
const props = defineProps({
    // Define props here
    showFlowData: {
        type: Object,
    },
    drawer: {
        type: Boolean,
    },
    recapture: {
        type: Boolean
    },
    inputSelectNodeIds: {
        type: Array
    }
});

const popShowData = ref({
    edgeId: props.showFlowData.id,
    dataOne: {
        name: '通用',
        type: '1',
        selectValue: '',
    },


})

const node_data = computed(() => {
    if (popShowData.value.dataOne.selectValue == '1') {
        props.showFlowData.data.lineName = '判断成功';
    } else {
        props.showFlowData.data.lineName = '';
    }

    let obj = {
        name: popShowData.value.dataOne.name, //名称
        type: 1, //类型 1枚举,2多文本
        value1: popShowData.value.dataOne.selectValue, //值1
        value2: "", //值2
        operator: "", //运算符
        nextId: props.showFlowData.target,
        outName: "Currency",
        sign: "=="
    }

    return obj;
});

const APIOutput = computed(() => {
    const allCheckLists = [{
        name: '数据类型',
        type: '枚举'
    }];
    return allCheckLists;
});

// watch(() => props.drawer, (val) => {
//     if (!val) {
//         console.log('val',val);
//         setData();// 更新数据
//     }
// }, { deep: true }, { immediate: true })

watch(() => popShowData.value, (val) => {
    if (val) {
        setData();// 更新数据
    }
}, { deep: true }, { immediate: true })

watch(() => props.recapture, (val) => {
    reset();
    getList();
}, { deep: true }, { immediate: true })

watch(() => APIOutput.value, (val) => {
    popShowData.value.APIOutput = val
})

onMounted(() => {
    getList();
    setData();
})
const getList = () => {
    if (props.showFlowData.source) {
        let nodeData = flowNodes.getFlowNodesById(props.showFlowData.source);

        if (nodeData) {
            if (nodeData.data.nextEdges && nodeData.data.nextEdges.length > 0) {
                nodeData.data.nextEdges.forEach(item => {
                    if (item.edgeId == props.showFlowData.id) {
                        popShowData.value = JSON.parse(JSON.stringify(item));
                    }
                })
            }
        }

        if (props.showFlowData.sourceNode.data.methodName == 'getMaterial') {
            listAllMaterial().then(res => {
                material_list.value = res.data
            })
        }
    }
}
const setData = () => {
    // 找到这条线延申出来的节点
    let nodeData = flowNodes.getFlowNodesById(props.showFlowData.source);
    // 如果找到了该节点，则更新数据
    if (nodeData) {
        if (!nodeData.data.nextEdges) {
            nodeData.data.nextEdges = [];
            nodeData.data.nextList = [];
        }

        if (nodeData.data.nextEdges.length > 0) {

            let found = false;
            nodeData.data.nextEdges.forEach((item, index) => {
                if (item.edgeId == props.showFlowData.id) {
                    found = true;
                    nodeData.data.nextEdges[index] = JSON.parse(JSON.stringify(popShowData.value));
                    nodeData.data.nextList[index] = JSON.parse(JSON.stringify(node_data.value));

                }
            })

            if (!found) {
                nodeData.data.nextEdges.push(popShowData.value)
                nodeData.data.nextList.push(node_data.value)
            }
        } else {
            nodeData.data.nextEdges.push(popShowData.value)
            nodeData.data.nextList.push(node_data.value)
        }

        flowNodes.setFlowNodesById(props.showFlowData.source, nodeData)
    }
}

const reset = () => {
    popShowData.value = {
        edgeId: props.showFlowData.id,
        dataOne: {
            name: '通用',
            type: '1',
            selectValue: '',
        },
    }
}
</script>

<style scoped></style>